<template>
    <div>
        <el-form :model="ruleForm" :rules="rules">
            <el-form-item prop="phone">
                <el-input placeholder="请输出手机号" v-model="ruleForm.phone">
                    <i slot="prefix" class="el-icon-phone"></i>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-row :gutter="18">
                    <el-col :span="18">
                        <el-input placeholder="请输入验证码" v-model="ruleForm.code">
                            <i slot="prefix" class="el-icon-tickets"></i>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button>发送验证码</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "PhoneLogin",
        props: {
            ruleForm: {
                type: Object,
                require: true
            },
            countDown: {
                type: Number,
                default: 60
            }
        },
        data() {
            let checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'))
                } else {
                    let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('手机号验证错误'))
                    }
                }
            }
            return {
                // 表单验证规则
                rules: {
                    phone: [
                        {
                            validator: checkPhone,
                            trigger: 'change'
                        }
                    ],
                    code: [
                        {
                            required: true,
                            message: '验证码不能为空',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>
